import { forwardRef, useState } from "react";
import './index.scss'
import { Button, Form, Input, message } from "antd";
import type { User, UserVo } from "@/types";
import classNames from "classnames";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { useUserStore } from '@/store/index'
import { login } from "@/apis/user";
import { useNavigate } from "react-router-dom";

const Login = forwardRef((props, ref) => {
  // 用户仓库
  const userStore = useUserStore();
  // 路由
  const navigate = useNavigate();

  const onFinish = async (userInfo:User) => {
     try {
        const res = await login(userInfo);  
        if (res.code === 200) {
          // 将用户和token信息存入状态仓库
          const userVo: UserVo =  res.data;
          userStore.setToken(userVo.token);
          userStore.setUserInfo(userVo);
          message.success('登陆成功！');
          // 跳转到首页
          navigate('/');
        }else {
          message.error(res.msg);
        }
     } catch (error) {
        message.error(error + '');
     }
  };

  const [isLogin,setIsLogin] = useState<boolean>(true);

  const loginForm = (
      <Form 
                name="basic"
                labelCol={{ span: 0 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ }}
                onFinish={onFinish}
                autoComplete="off"
              >
                <Form.Item<User>
                  label=""
                  name="account"
                  rules={[{ required: true, message: 'Please input your account!' }]}
                >
                  <Input className="form-input" prefix={<UserOutlined />}/>
                </Form.Item>

                <Form.Item<User>
                  label=""
                  name="password"
                  rules={[{ required: true, message: 'Please input your password!' }]}
                >
                  <Input.Password className="form-input" prefix={<LockOutlined />}/>
                </Form.Item>

                <Form.Item label={null}>
                  <Button type="primary" htmlType="submit" style={{width: '200px'}}>
                    Submit
                  </Button>
                </Form.Item>
                <Form.Item label={null}>
                  <Button className="login-button" color="primary" variant="filled" onClick={() => {setIsLogin(!isLogin)}} style={{width: '200px'}}>
                    {
                      isLogin ? 'Sign' : 'Login'
                    }
                  </Button>
                </Form.Item>
      </Form>
  )

    return (
        <div className="login-container">
          <div className="login-form-zone">
              <div  className={classNames("form-left-zone",{'form-left-sign-zone': isLogin,'form-right-login-zone': !isLogin,'form-swapped-left': !isLogin})}>
              </div>
              <div  className={classNames("form-right-zone",{'form-swapped-right': !isLogin})}>
                  {
                    loginForm
                  }
              </div>
          </div>
        </div>
    )
});

export default Login;